<template>
    <div class="common-layout">
      <el-container>

        <el-header>
            <el-select v-model="state.selected" class="m-2" placeholder="Select" 
            @change="change"
            size="large">
                <el-option v-for="item in state.options" :key="item" :label="item" :value="item" />
            </el-select>

            <el-text> 数量：{{ state.list_data.length }} </el-text>

            <copy-stocks-to-clipboard :data="state.list_data" />
        </el-header>

        <el-main>
            <el-table :data="state.list_data" height="700" style="width: 100%"
            @sort-change="sortChange"
            :default-sort="state.sort"
            :cell-class-name="tableCellClassName"
             >
                <el-table-column prop="date" label="日期" sortable width="110" />
                <el-table-column prop="stock" label="股票" width="150">
                    <template #default="scope">
                        <ToStockDetail :stock="scope.row.stock" />
                    </template> 
                </el-table-column>
                <el-table-column prop="industry" label="行业" sortable width="150"/>
                <el-table-column prop="close" label="价格" width="100"/>
                <el-table-column prop="monthPct" label="月涨跌" sortable  width="100"/>
                <el-table-column prop="nextMonthPct" label="下月涨跌" sortable  width="100"/>
                <el-table-column prop="lp" label="分位点" sortable width="120" />
                <el-table-column prop="relLP" label="相对分位点" sortable width="120" />
                <el-table-column prop="duration" label="持续月数" sortable width="120" />
                <el-table-column prop="monthCount" label="记录数" sortable width="120" />
                <el-table-column prop="category" label="类别" width="120" />
            </el-table>
        </el-main>

      </el-container>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import { getMonthLpUp } from '../service/statistic'
import ToStockDetail from './ToStockDetail.vue';
import CopyStocksToClipboard from './CopyStocksToClipboard.vue';

        const selectKey = "MonthLpUpSelect"
        const sortPropKey = "MonthLpUpSortProp"
        const sortOrderKey = "MonthLpUpSortOrder"

        const state = reactive({
            list_data : [],
            options: [],
            data: [],
            selected: "",
            sort: { 
                prop: sessionStorage.getItem(sortPropKey) || 'monthPct' , 
                order: sessionStorage.getItem(sortOrderKey) || 'descending' 
            }
        })
    
        // 初始化数据
        getMonthLpUp().then(res => {
            state.data = res.data
            state.options = state.data.dates

            if (sessionStorage.getItem(selectKey)!= null) {
                state.selected = sessionStorage.getItem(selectKey)
                state.list_data = state.data.data[state.selected]
            } else {
                state.selected = state.options[0]
                state.list_data = state.data.data[state.selected]
            }
        })

        const sortChange = (column, prop, order) => {
            sessionStorage.setItem(sortPropKey, column.prop)
            sessionStorage.setItem(sortOrderKey, column.order)
        }

        //单击
        function cellClick(row, column, cell, event) {
        }

        const change = () => {
            state.list_data = state.data.data[state.selected]
            sessionStorage.setItem(selectKey, state.selected)
        }

        const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
            var columnProperty = column.property
            if ((columnProperty == 'nextMonthPct') && (row.nextMonthPct < 0)) {
                return 'lt0-cell'
            }

            return ''
        }
</script>
<style>
</style>